<template>
  <headSlot>
    <template #gonggao>
      <div v-html="gonggaoData" />
    </template>

    <template #left>
      <headNav :navs="topNavLeftData" />
    </template>

    <template #right>
      <navUserCenter />
    </template>

    <template #middle>
      <!-- <div class="header-logo" :style="comLogo" /> -->
      <headSearch class="header-search" />
    </template>

    <template #bottom="{fixed}">
      <headMenu :accountShow="fixed" :topNavRightData="topNavRightData" />
    </template>
  </headSlot>
</template>

<script>
import { mapGetters } from 'vuex';
// components
import headSlot from './head/headSlot.vue';
import headNav from './head/headNav.vue';
import navUserCenter from '@/components/nav-user-center/index.vue';
import headSearch from './head/search.vue';
import headMenu from './head/headMenu.vue';
// resource
import logoImage from '@/assets/logo.png';

export default {
    components: {
        headSlot,
        headNav,
        headMenu,
        headSearch,
        navUserCenter,
    },
    props: {
        gonggaoData: String,
        topNavLeftData: Array,
        topNavRightData: Array,
        logo: String,
    },
    computed: {
        ...mapGetters(['token']),
        comLogo() {
            return `background-image: url(${this.logo || logoImage});`;
        },
    },
};
</script>

<style lang="less" scoped>
.header-logo {
  position: absolute;
  width: 220px;
  height: 105px;
  left: 24px;
  top: 55px;
  background: transparent no-repeat 0;
  z-index: 10;
}
.header-search {
  position: absolute;
  right: 0;
  top: @headMiddleHeight - @headMenuHeight;
}
.top_nav_right-wrapper {
  display: flex;
  .head-account {
    margin-right: 10px;
  }
}
</style>
